<template>
	<view>
		<navbar :showBack="true">搜索商品</navbar>
		<view class="searchGood">
			<view class="search">
				<u-search @search="goSearch" @custom="goSearch" @clear="clear" v-model="keyWord"></u-search>
			</view>
			<view class="title" v-show="showHotKeyword">热门搜索</view>
			<view class="list acea-row" v-show="showHotKeyword">
				<view class="item" v-for="(item,index) in hotKeyword" :key="index" @click="goSearch(item)">{{item}}</view>
			</view>
			<view class="line" :style="!showHot?'border-bottom: 1rpx solid #eee;':''"></view>
			<goodslist :list="goodsList"></goodslist>
		</view>
		<view class="noCommodity" v-show="showHot">
			<view class="pic"><image src="../../static/images/noSearch.png" mode=""></image></view>
			<recommend :hotData="hotGoods" v-show="showHotData"></recommend>
		</view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				hotKeyword:[],
				showHotKeyword:true,
				showHot:true,
				showHotData:false,
				hotGoods:[],
				goodsList:[],
				keyWord:""
			}
		},
		onLoad() {
			this.getSearchKeyword()
		},
		methods:{
			getSearchKeyword:function(){
				const that = this;
				api.search.getSearchKeyword().then(e=>{
					if(e.status == 200){
						that.hotKeyword = e.data
						if(JSON.stringify(e.data) == "[]"){
							that.showHotKeyword = false
						}
					}else{
						that.showHotKeyword = false
					}
				})
			},
			goSearch:function(e){
				const that = this;
				let params = {};
				params.keyword = e;
				this.keyWord = e;
				if(this.keyWord != ""){
					api.goods.getGoodsList(params).then(e=>{
						console.log("es",e)
						that.showHot = e.showHot
						that.showHotData = e.showHot
						that.goodsList = e.goodsList.data
						if(e.showHot){
							that.hotGoods = e.hotGoods.data
						}
					})
				}else{
					uni.showToast({
						title:"搜索关键词不能为空",
						icon:"none",
						duration:800
					})
				}
			},
			clear:function(){
				this.keyWord = ""
			}
		}
	}
</script>

<style>
	.searchGood .search{
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.searchGood .title{
		font-size: 28rpx;
		color: #999;
		margin: 50rpx 30rpx 25rpx 30rpx;
	}
	.searchGood .list{
		padding-left: 10rpx;
	}
	.searchGood .list .item{
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 3rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 0 20rpx 20rpx;
	}
	.searchGood .line{
		margin: 20rpx 30rpx 0 30rpx;
	}
	.noCommodity{
		border-top: 7rpx solid #f5f5f5;
	}
	.noCommodity .pic{
		width: 414rpx;
		height: 336rpx;
		margin: 30rpx auto 30rpx auto;
	}
</style>
